<template>
	<view class="outside">
		<view class="box">
			<view class="left">
				<view class="location" v-if="isget">
					{{provinces}}
					{{citys}}
				</view>
				<view class="location" v-else>
					中国
				</view>
				<view class="nowtime">
					{{date}}
				</view>
				<view class="nowdate">
					{{Alldate}}
					<van-icon name="replay" size='30rpx' @click='this.getphrase()'/>
				</view>
			</view>
			<view class="right" v-if="isget">
				<view class="weather">
					{{weather}}
				</view>
				{{temperature}}℃
			</view>
			<view class="message" v-else @click="reget">
				<van-icon name="replay" size='50rpx' />
				<view style="width: 200rpx;margin-left: 10rpx;">轻触可获取位置信息和天气信息</view>
			</view>

		</view>
		<view class="buttom">
			<view class="phrases">
				{{phrase}}
			</view>
		</view>
	</view>
</template>

<script>
	import amap from '@/amap-wx.130.js'; //自己js的所在的位置
	import {
		wxGetAddress
	} from '@/function.js'; //刚刚封装的方法
	export default {
		name: "location",

		data() {
			return {
				province: '',
				city: '',
				district: '',
				temperature: '',
				weather: '',
				year: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				daytime: new Date().getDate(),
				day: new Date().getDay(),
				hours: new Date().getHours(), // 获取当前小时数，24 小时格式，例如：13
				minutes: new Date().getMinutes(), // 获取当前分钟数，例如：25
				seconds: new Date().getSeconds(), // 获取当前秒数，例如：30
				Alldate: '',
				date: '',
				setTime: '',
				isget: false, //是否同意获取位置信息,
				phrase: '',
				phrases: [
					"成功的关键在于坚持不懈的努力。",
					"走过荒漠，方能获得彩虹。",
					"相信最美好的事情马上就要发生。",
					"认真地做好每一件小事，成功就在不远处。",
					"只有当你不断尝试，你才有可能成功。",
					"不断超越自我，才能走向人生的巅峰。",
					"生命就像一场马拉松，每一步都要用心跑。",
					"相信自己，你所期待的未来就在前方等待着你。",
					"只有不停地前进，我们才能探索到未知的世界。",
				]
			};
		},
		onLoad() {

		},
		onHide() {
			clearInterval(setTime)
		},
		mounted() {
			this.getphrase()
			this.setTime = setInterval(() => {
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month >= 9 ? month : month = '0' + month
				let day = date.getDate()
				day >= 9 ? day : day = '0' + day
				let hour = date.getHours()
				hour >= 9 ? hour : hour = '0' + hour
				let minute = date.getMinutes()
				minute >= 9 ? minute : minute = '0' + minute
				let second = date.getSeconds()
				second >= 9 ? second : second = '0' + second
				this.Alldate = year + '年' + month + '月' + day + '日    ' + this.weekday
				this.date = hour + ":" + minute + ":" + second

			}, 1000)
			// this.getLocation()
			this.click()

		},
		computed: {
			weekday() {
				// 将整数值转换为星期几的文字
				let weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				return weekdays[this.day];
			},
			// time() {
			// 	return this.month + "月" + this.daytime + "日       " + this.weekday
			// },
			// nowtime() {
			// 	return this.hours + ':' + this.minutes + ':' + this.seconds
			// },
			citys() {
				return this.city.replace(/市/g, '')
			},
			provinces() {
				return this.province.replace(/省/g, '')
			}
		},
		methods: {
			getphrase() {
				const randomIndex = Math.floor(Math.random() * this.phrases.length);
				this.phrase = this.phrases[randomIndex];
			},
			reget() {
				this.openAuthSetting()
			},

			click() {
				uni.getLocation({
					type: 'wgs84',
					success: async res => {
						this.isget = true
						let {
							longitude,
							latitude
						} = res;

						try {
							let result = await wxGetAddress({
								longitude,
								latitude
							});
							this.province = result.regeocodeData.addressComponent.province
							this.city = result.regeocodeData.addressComponent.city

						} catch (e) {
							//TODO handle the exception
						}
						let self = this; // 保存Vue实例的引用


						var myAmapFun = new amap.AMapWX({
							key: '1e9eb6ebe53029f1a2be70de8e5e60cf'
						});
						myAmapFun.getWeather({
							success: function(data) {
								self.temperature = data.temperature.data
								self.weather = data.weather.data
							},
							fail: function(info) {
								//失败回调
								console.log(info)
							}
						})

					},
					fail: error => {
						console.log("获取定位失败了", error)

						// uni.showToast({

						// 	title: '你拒绝了授权，无法操作内容,请返回上一页',
						// 	icon: "none",
						// 	duration: 3000,
						// })
						// this.getSetting()
					}
				});
			},

			openAuthSetting() {
				let that = this;
				uni.getSetting({
					success: (res) => {
						console.log(res, JSON.stringify(res, "getSetting"));
						if (
							res.authSetting["scope.userLocation"] != undefined &&
							res.authSetting["scope.userLocation"] != true
						) {
							uni.showModal({
								title: "请求授权当前位置",
								content: "需要获取您的地理位置，请确认授权",
								success: function(res) {
									if (res.cancel) {
										uni.showToast({
											title: "拒绝授权",
											icon: "none"
										});
									} else if (res.confirm) {
										uni.openSetting({
											success: function(dataAu) {
												console.log(dataAu, "openSetting");
												if (dataAu.authSetting[
														"scope.userLocation"] ==
													true) {
													uni.showToast({
														title: "授权成功",
														icon: "none"
													});
													//再次授权，调用wx.getLocation的API
													that.click();
												} else {
													uni.showToast({
														title: "授权失败",
														icon: "none"
													});
												}
											},
										});
									}
								},
							});
						} else if (res.authSetting["scope.userLocation"] == undefined) {
							//调用wx.getLocation的API
							console.log("首次授权");
							this.getLocation();
						} else {
							//调用wx.getLocation的API
							this.getLocation();
						}
					},
					complete() {
						console.log("getSetting");
					},
				});
			}
		},
	}
</script>

<style lang="less" scoped>
	.outside {
		background-image: linear-gradient(to right, #FFEFBA, #FFFFFF);
		border-radius: 10rpx;
		width: 97%;
		margin: 32rpx 20rpx;
		height: 260rpx;
		overflow: visible;

		.box {
			margin-left: 20rpx;
			padding-top: 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 38rpx;

			.left {
				.location {
					font-size: 40rpx;
				}

				.nowdate {
					font-size: 30rpx;
				}
				.nowtime{
					font-size: 45rpx;
				}
			}

			.right {
				margin-right: 105rpx;

				.weather {
					font-size: 58rpx;
					color: #ABD0CE;
				}
			}

			.message {
				display: flex;

				color: #D9D4CF;
				font-size: 30rpx;
			}
		}

		.buttom {
			margin-left: 20rpx;
			margin-top: 20rpx;
			font-size: 30rpx;
		}
	}
</style>